<template>
  <div class="app-container">
    <div class="head-container">
      <!--表格-->
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="margin-bottom: 18px">
          <span class="role-span">字段配置: {{ tableName }}</span>
          <el-button style="float: right" type="warning" icon="el-icon-refresh">同步字段信息</el-button>
          <el-button type="info" style="float: right;margin-right: 15px" icon="el-icon-back" @click="backGenerator">返回
          </el-button>
        </div>
        <el-table :data="configList" height="200px" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="columnName" label="字段名称" />
          <el-table-column prop="dataType" label="字段类型" width="180" />
          <el-table-column prop="columnComment" label="字段描述" />
          <el-table-column prop="isNullable" label="是否必填">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isNullable != 'YES'" />
            </template>
          </el-table-column>
          <el-table-column prop="columnKey" label="是否主键" />
        </el-table>
      </el-card>
      <!--配置项-->
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="margin-bottom: 18px">
          <span class="role-span">设置生成规则</span>
          <el-button style="float: right" type="primary" icon="el-icon-refresh" @click="execute">生成代码</el-button>
        </div>
        <el-form ref="form" :model="formData" label-width="160px">
          <el-form-item label="作者名称：" prop="author">
            <el-input v-model="formData.author" style="width: 40%" />
            <span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
          </el-form-item>
          <el-form-item label="模块名称：" prop="moduleName">
            <el-input v-model="formData.moduleName" style="width: 40%" />
            <span style="color: #C0C0C0;margin-left: 10px;">模块的名称，请选择项目中已存在的模块</span>
          </el-form-item>
          <el-form-item label="至于包下：" prop="pack">
            <el-input v-model="formData.pack" style="width: 40%" />
            <span style="color: #C0C0C0;margin-left: 10px;">项目包的名称，生成的代码放到哪个包里面</span>
          </el-form-item>
          <el-form-item label="接口名称：" prop="apiAlias">
            <el-input v-model="formData.apiAlias" style="width: 40%" />
            <span style="color: #C0C0C0;margin-left: 10px;">接口的名称，用于控制器与接口文档中</span>
          </el-form-item>
          <el-form-item label="是否覆盖" prop="cover">
            <el-radio-group v-model="formData.cover" style="width: 40%">
              <el-radio-button label="true">是</el-radio-button>
              <el-radio-button label="false">否</el-radio-button>
            </el-radio-group>
            <span style="color: #C0C0C0;margin-left: 10px;">谨防误操作，请慎重选择</span>
          </el-form-item>
        </el-form>
      </el-card>

    </div>
  </div>
</template>

<script>
import { execute, getColumnsByTableName } from '@/api/generator/generator'

export default {
  data() {
    return {
      tableName: '',
      configList: [],
      formData: {
        author: 'Voyage',
        moduleName: 'module',
        pack: 'com.voyage',
        apiAlias: 'VoyageController',
        cover: false
      },
      rules: {}
    }
  },
  created() {
    this.tableName = this.$route.query.tableName
    this.getColumns(this.tableName)
  },
  methods: {
    async getColumns(tableName) {
      await getColumnsByTableName(tableName).then(res => {
        this.configList = res.data.data
      }).catch(err => {
        console.error(err)
      })
    },
    backGenerator() {
      this.$router.push({ path: '/generator' })
    },
    async execute() {
      const table = { 'tableName': this.tableName }
      const params = Object.assign(table, this.formData)
      console.log(params)
      await execute(params).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$message.success('代码生成成功')
        } else {
          this.$message.error('代码生成失败')
        }
      }).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .role-span {
    font-weight: bold;
    color: #303133;
    font-size: 15px;
  }
</style>
